<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link rel="stylesheet" href="/scripts/artcloudui/skins/white/css/artcloudui.css?v=1.0.2"/>
<link rel="stylesheet" href="/content/font-artcloud/css/artcloud-icons.min.css?v=0.0.1">
<link rel="stylesheet" href="/scripts/perfect-scrollbar/css/perfect-scrollbar.min.css">
<link rel="stylesheet" href="/css/lazycoder.css?v=0.0.1">
<script src="/scripts/jquery-1.11.3.min.js"></script>
<script src="/scripts/common.js"></script>
<script src="/content/bootstrap/js/bootstrap.min.js"></script>
<script src="/scripts/artcloudui/artcloudui.dialog.min.js?v=1.0.2"></script>
<script src="/scripts/artcloudui/artcloudui.grid.min.js?v=1.0.2"></script>
<script src="/scripts/artcloudui/artcloudui.pager.min.js?v=1.0.3"></script>
<script src="/scripts/AFCore.js?v=002"></script>
<script src="/scripts/perfect-scrollbar/js/perfect-scrollbar.jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/nch5/index.js?t=2015052012"></script>
<html>
<head>
    <title> </title>
</head>
<body>
<div class="main-egg block">
    <div id="table-container" class="egg-left inline-block">
        <ul id="tables" class="ul" >
        </ul>
    </div>
    <div class="egg-right inline-block">

    </div>
</div>
<fieldset class="fieldset">
    <legend>数据库信息</legend>
    <div class="main-info block">
        <div class="row">
            <div class="line">
                <span>地址:</span><input id="ip" class="input inline-block" type="text" value="127.0.0.1" placeholder="请输入地址">
            </div>
            <div class="line">
                <span>端口号:</span><input id="port" class="input inline-block" type="text" value="3306" placeholder="请输入端口号">
            </div>
            <div class="line">
                <span>库名称:</span><input id="dbName" class="input inline-block" type="text"  value="tstp" placeholder="请输入数据库名称">
            </div>
        </div>
        <div class="row">
            <div class="line">
                <span>用户名:</span><input id="userName" class="input inline-block" type="text" value="root" placeholder="请输入用户名">
            </div>
            <div class="line">
                <span>密码:</span><input id="password" class="input inline-block" type="password" value="123456" placeholder="请输入密码">
            </div>
            <div class="line">
                <button class="button dbinfo">确定</button>
            </div>
        </div>
    </div>
</fieldset>

</body>
<script>
$(function () {
    $("#tables").on("click","li",function () {
        $(this).toggleClass("cur");
    });
    $(".dbinfo").click(function () {
        var ip = $("#ip").val().trim();
        var port = $("#port").val().trim();
        var dbName = $("#dbName").val().trim();
        var userName = $("#userName").val().trim();
        var password = $("#password").val().trim();
        if (ip=="") {
            $.artcloud.apop({content:"请输入IP", type:'error', position:'center-center'});
            $("#ip").focus();
            return;
        }
        if (port=="") {
            $.artcloud.apop({content:"请输入端口", type:'error', position:'center-center'});
            $("#port").focus();
            return;
        }
        if (dbName=="") {
            $.artcloud.apop({content:"请输入数据库名称", type:'error', position:'center-center'});
            $("#dbName").focus();
            return;
        }
        if (userName=="") {
            $.artcloud.apop({content:"请输入用户名", type:'error', position:'center-center'});
            $("#userName").focus();
            return;
        }
        if (password=="") {
            $.artcloud.apop({content:"请输入密码", type:'error', position:'center-center'});
            $("#password").focus();
            return;
        }
        var info = {
            ip:ip,
            port:port,
            dbname:dbName,
            userName:userName,
            password:password
        };
        var postData = {
            info:AFC.JSON.stringify(info)
        };
        AFC.ajax.postJSON("/home/connectToDb",postData,function (rdata) {
            if (rdata.status) {
                var ulitem = $("#tables");
                $(ulitem).empty();
                rdata.obj.forEach(function (item, number) {
                    ulitem.append($("<li title='"+item+"'>"+item+"</li>").data("data",item));
                });
                $("#table-container").perfectScrollbar();
            }
        })
    })
})
</script>
</html>
